require('./Searchbar.styl');
const { Icon } = SaltUI;
import classNames from 'classnames';

class Searchbar extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            show: false,
            keyword: '',
        };
    }
    onClick() {
        this.setState({
            show: true
        })
    }
    onExit() {
        this.setState({
            show: false
        }, () => {
            if (this.refs.input)
                this.refs.input.value = ""
        })
        this.props.onExit && this.props.onExit();
    }
    onSearch() {
        let keyword = this.refs.input.value;
        this.setState({ keyword }, () => {
            this.props.onSearch && this.props.onSearch(keyword)
        })
    }
    onEnter(e) {
        if (!e)
            var e = window.event;
        if (e.keyCode == 13) {
            let keyword = this.refs.input.value;
            this.props.onEnter && this.props.onEnter(keyword)
        }
    }

    render() {
        let t = this;
        return (
            <div className="searchbar">
                <div className={classNames('test', { ishide: t.state.show })}>
                    <div className="searchDiv" onClick={t.onClick.bind(t)}>
                        <Icon name="search" height='12px' width="12px" fill="#999" className="searchIcon" />
                        搜索
                    </div>
                </div>
                {t.state.show && <div className={classNames('searchContainer', { ishide: !t.state.show })}>
                    <span className="inputBox">
                        <Icon name="search" height='12px' width="12px" fill="#999" className="searchIcon1" />
                        <input type="text" className="searchInput" ref="input" placeholder="搜索" autoFocus value={t.state.keyword} onChange={t.onSearch.bind(t)} onKeyDown={t.onEnter.bind(t)} />
                    </span>
                    <span className="exit" onClick={t.onExit.bind(t)}>取消</span>
                    <div className="resultBox">
                        {!!t.props.children && !!t.props.children.length && t.props.children}
                    </div>
                </div>}
            </div>
        );
    }

    componentWillMount() {
    }

    componentDidMount() {
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
    }
}

module.exports = Searchbar;
